<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可复用过渡</title>
		<script src="Vue.js"></script>
		<style>
			*{
				margin:0;
				padding:0;
			}
			html,body,#box{
				height:100%;
				width:100%;
				overflow-x:hidden;
			}
			#box button{
				width:15%;
				height:30px;
				margin-top:20px;
				cursor:pointer;
				background-color:black;
				color:white;
				border:none;
			}
			#box button:hover{
				background-color:red;
			}
			.cover{
				position:fixed;
				left:0;
				top:50px;
				width:15%;
				height:100%;
				background-color:black;
			}
			.bounce-enter-active{
				animation:bounce-in .5s;
			}
			.bounce-leave-active{
				animation:bounce-in .5s reverse;
			}
			@keyframes bounce-in {
				0%{
					transform: translateX(-100%);
					opacity: 0;
				}
				
				100%{
					transform: translateX(0px);
					opacity: 1;
				}
			}
			ul{
				width:100%;
				min-height:400px;
				color:white;
			}
			ul li{
				width:100%;
				height:40px;
				margin:30px 0;
				text-align:center;
				line-height:40px;
			}
			ul li a{
				display:block;
				width:100%;
				height:40px;
				color:white;
				text-decoration:none;
			}
			ul li a:hover{
				color:white;
				background-color:rgba(255,0,0,.5);
			}
		</style>
	</head>
	<body>
		<div id="box">
			<button @click="changeClick" :style="isShow==false ? obj1 : obj2 " title="点击打开/隐藏菜单">菜单</button>
	        <cover :isshow="isShow"></cover>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#box",
				data:{
					isShow:false,
					obj1:{
						backgroundColor:"black",
					},
					obj2:{
						backgroundColor:"red",
					}
				}, 
				methods:{
					changeClick:function(){
						this.isShow=!this.isShow;
					}
				},
				components:{
					"cover":{
						template:`
						<transition name="bounce">
							<div class='cover' v-if='isshow'>
							    <ul>
								    <li v-for="data in datalist">
									   <a href="#">{{data}}</a>
									</li>
								</ul>
							</div>
						</transition>
						`,
						props:["isshow"],
						data:function(){
							return {
								datalist:["主页","留言","简介","风景","住宿","导航","交通"]
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
